<template>
  <div class="common">
      <h3>发表评论</h3>
      <hr>
      <textarea placeholder="请输入内容(100字以内)" v-model.trim="textvalue"></textarea>
      <mt-button type="primary" size="large" @click="posted">发表评论</mt-button>
      <div class="container">
        <div class="containder-box" v-for="(item, index) in listData" :key="index">
          <div class="container-title">
            第{{index + 1}}楼: {{item.user_name}} 发表时间: {{item.add_time | dataF}}
          </div>
          <div class="container-nei">
            {{item.content?item.content: '该用户未输入内容!'}}
          </div>
        </div>
      </div>
      <mt-button type="danger" size="large" plain @click="addMore">加载更多</mt-button>
  </div>
</template>
<script>
import {Toast} from 'mint-ui';
export default {
  data() {
    return{
      pageIndex: 1,
      listData:[],
      textvalue:null
    };
  },
  props:["id"],
  created () {
    this.getListData();
  },
  methods: {
    getListData(){
      this.$http
      .get("api/getcomments/" + this.id + "?pageindex=" + this.pageIndex)
      .then(res => {
        if(res.body.status === 0 && res.body.message.length) {
          this.listData = this.listData.concat(res.body.message);
        } else {
          Toast('请求失败!')
        }
      })
    },
    addMore(){
      this.pageIndex++;
      this.getListData();
    },
    posted() {
      this.$http
      .post('api/postcomment/' + this.$route.params.id, {content:this.textvalue})
      .then((res) => {
        this.listData.unshift({
          content:this.textvalue,
          user_name: '匿名用户',
          add_tiem:new Date()
        })
        this.textvalue = null;
      })
    }
  }
}
</script>
<style lang="less" scoped>
.common {
  h3 {
    color: #000;
    text-align: left;
    font-size: 16px;
  }
  hr {
    margin: 10px 0;
  }
  textarea {
    font-size: 13px;
    margin: 10px 0;
  }
  .container{
    padding: 0;
    margin: 5px 0;
    .containder-box {
      font-size: 13px;
      .container-title {
        background: #ccc;
        line-height: 25px;
      }
      .container-nei {
        line-height: 25px;
      }
    }
  }
}
</style>

